<template>
  <view class="before-result-page-mbti">
    <navigationBar :emitBackEvent="true" @backEvent="backHandle" :my-property="navigationBarDataInfo" />
    <view class="fixed-right-tip" @click="backToSclList" v-if="showMoreSclBlock">
      更多测评
      <u-icon color="#7E3508" size="24rpx" name="arrow-right"></u-icon>
    </view>

    <template v-for="(img,index) in staticImgs.imgArr">
      <view class="img-wrapper">
        <image class="img" :src="img" mode="widthFix"></image>
        <view class="box-wrapper-1-pos" v-if="index === 0" :style="{'top':topH+'rpx'}">

          <view class="tit-img-wrapper">
            <image class="img" :src="staticImgs.titImg" mode="widthFix"></image>
          </view>
          <view class="text-box">
            测试结果
          </view>
          <view class="legend-wrapper">
            <image v-if="!reRenderLegend" class="legend-img" :src="legendImg" mode="widthFix"></image>
            <view class="question-img">
              <image class="img" :src="staticImgs.questionImg" mode="widthFix"></image>
            </view>
          </view>

          <view class="first-small-btn" @click="confirmHandle" :style="{'background-image':`url(${staticImgs.btnBg})`}">
            <view class="unit">¥</view>
            <view class="price">{{ nowPrice }}</view>
            <view>解锁你的专属MBTI形象</view>
            <view class="tip-box" v-if="fixeBtnType === 4">
              已享{{sclInfo.discount}}折优惠
            </view>
          </view>

        </view>

        <view class="box-wrapper-3-pos" v-else-if="index === 2">
          <view class="before-exit-btn-wrapper" :style="{'background-image':`url(${staticImgs.smallBtnImg})`}"
            @click="confirmHandle">
            <view class="price-box">
              <view class="unit">¥</view>
              <view class="num">{{nowPrice}}</view>
            </view>
            <view class="btn-text">解锁专属报告</view>
          </view>
        </view>

        <view class="box-wrapper-4-pos" v-else-if="index === 3">
          <view class="before-exit-btn-wrapper" :style="{'background-image':`url(${staticImgs.smallBtnImg})`}"
            @click="confirmHandle">
            <view class="price-box">
              <view class="unit">¥</view>
              <view class="num">{{nowPrice}}</view>
            </view>
            <view class="btn-text">解锁专属报告</view>
          </view>

        </view>

        <view class="box-wrapper-5-pos" v-else-if="index === 4">
          <view class="before-exit-btn-wrapper" :style="{'background-image':`url(${staticImgs.smallBtnImg})`}"
            @click="confirmHandle">
            <view class="price-box">
              <view class="unit">¥</view>
              <view class="num">{{nowPrice}}</view>
            </view>
            <view class="btn-text">解锁专属报告</view>
          </view>
        </view>


        <view class="box-wrapper-6-pos" v-else-if="index === 5">
          <view class="before-exit-btn-wrapper" :style="{'background-image':`url(${staticImgs.smallBtnImg})`}"
            @click="confirmHandle">
            <view class="price-box">
              <view class="unit">¥</view>
              <view class="num">{{nowPrice}}</view>
            </view>
            <view class="btn-text">解锁专属报告</view>
          </view>
        </view>


        <view class="box-wrapper-8-pos" v-else-if="index === 7">
          <view class="before-exit-btn-wrapper" :style="{'background-image':`url(${staticImgs.smallBtnImg})`}"
            @click="confirmHandle">
            <view class="price-box">
              <view class="unit">¥</view>
              <view class="num">{{nowPrice}}</view>
            </view>
            <view class="btn-text">解锁专属报告</view>
          </view>
        </view>


        <view class="box-wrapper-10-pos" v-else-if="index === 9">
          <view class="before-exit-btn-wrapper" :style="{'background-image':`url(${staticImgs.smallBtnImg})`}"
            @click="confirmHandle">
            <view class="price-box">
              <view class="unit">¥</view>
              <view class="num">{{nowPrice}}</view>
            </view>
            <view class="btn-text">解锁专属报告</view>
          </view>
        </view>

        <view class="box-wrapper-12-pos" v-else-if="index === 11">
          <view class="before-exit-btn-wrapper" :style="{'background-image':`url(${staticImgs.smallBtnImg})`}"
            @click="confirmHandle">
            <view class="price-box">
              <view class="unit">¥</view>
              <view class="num">{{nowPrice}}</view>
            </view>
            <view class="btn-text">解锁专属报告</view>
          </view>
        </view>


        <view class="box-wrapper-14-pos" v-else-if="index === 13">
          <view class="before-exit-btn-wrapper" :style="{'background-image':`url(${staticImgs.smallBtnImg})`}"
            @click="confirmHandle">
            <view class="price-box">
              <view class="unit">¥</view>
              <view class="num">{{nowPrice}}</view>
            </view>
            <view class="btn-text">解锁专属报告</view>
          </view>
        </view>


      </view>
    </template>

    <view class="btn-wrapper-pos" v-if="showFixedBtn">
      <!-- 解锁专属报告 -->

      <view class="before-exit-btn-wrapper" :style="{'background-image':`url(${staticImgs.smallBtnImg})`}"
        @click="confirmHandle">
        <view class="price-box">
          <view class="unit">¥</view>
          <view class="num">{{nowPrice}}</view>
        </view>
        <view class="btn-text">解锁专属报告</view>
      </view>

    </view>

    <u-popup :show="showPopup" mode="bottom" @close="closeHandle" bgColor="transparent"
      :overlayStyle="{background: 'rgba(0, 0, 0, 0.8)'}">
      <view class="popup-wrapper">

        <view class="pay-btn" @click="payHandle">
          <u-icon name="weixin-fill" color="#fff" size="44rpx"></u-icon>
          <text class="text">立即支付</text>
        </view>

      </view>
    </u-popup>


    <BeforeExitPayModal :price-before="beforePrice" :price-now="nowPrice" @close="beforeExitPayClose"
      @confirm="beforeExitPayConfirm" :visible="beforeExitPayModalVisible" />

    <BeforeExitPayModal2 isMbti @close="beforeExitPayClose_2" @confirm="beforeExitPayConfirm_2" :visible="modalVisible" />
  </view>
</template>

<script>
  import navigationBar from "@/components/navigationBar/navigationBar.vue";
  import BeforeExitPayModal from '@/subcontractorD/components/BeforeExitPayModal_1.vue'
  import BeforeExitPayModal2 from '@/subcontractorD/components/BeforeExitPayModal_2.vue'
  import {
    removeEmptyProperty
  } from '@/common/utils/util.js'

  import {
    orderPay
  } from '@/common/api/scl_api.js'
  import {
    debounce
  } from 'lodash'
  let countTimer;
  var app = getApp();
  export default {
    components: {
      navigationBar,
      BeforeExitPayModal,
      BeforeExitPayModal2
    },
    props: {
      scrollTopNum: {
        type: Number,
        default: 0
      },
      sclId: {
        type: String,
        default: '',
      },
      sclPayBack: {
        type: Boolean,
        default: true
      },
      sclInfo: {
        type: Object,
        default: {},
      },
      couponInfo: {
        type: Object,
        default: {},
      },
    },
    data() {
      return {
        navigationBarDataInfo: {
          "bg_color": "transparent",
          "color": "#FFF",
          "flag": 1,
          "name": "MBTI测评",
          "hasEntity": false,
        },
        danmakuContainer: {},
        showMoreSclBlock: false,
        windowHeight: 99999,
        beforeExitPayModalVisible: false,
        modalVisible: false,
        staticImgs: {
          imgArr: [
            this.imgBaseURL + '/scl/scl-before-result-page/job-mbti/bg-1.png',
            this.imgBaseURL + '/scl/ad/MBTI/M-22x.png',
            this.imgBaseURL + '/scl/ad/MBTI/M-32x.png',
            this.imgBaseURL + '/scl/ad/MBTI/M-42x.png',
            this.imgBaseURL + '/scl/ad/MBTI/M-52x.png',
            this.imgBaseURL + '/scl/ad/MBTI/M-62x.png',
            this.imgBaseURL + '/scl/ad/MBTI/M-72x.png',
            this.imgBaseURL + '/scl/ad/MBTI/M-82x.png',
            this.imgBaseURL + '/scl/ad/MBTI/M-92x.png',
            this.imgBaseURL + '/scl/ad/MBTI/M-102x.png',
            this.imgBaseURL + '/scl/ad/MBTI/M-112x.png',
            this.imgBaseURL + '/scl/ad/MBTI/M-122x.png',
            this.imgBaseURL + '/scl/ad/MBTI/M-132x.png',
            this.imgBaseURL + '/scl/ad/MBTI/M-142x.png',
            this.imgBaseURL + '/scl/ad/MBTI/M-152x.png',

          ],
          arrowRight: this.imgBaseURL + '/scl/ad/MBTI/r-arrow.png',
          tipImg: this.imgBaseURL + '/scl/dialog-bg-1.jpg',
          btnImg: this.imgBaseURL + '/scl/ad/MBTI/unlock-btn.png',

          smallBtnImg: this.imgBaseURL + '/scl/scl-before-result-page/job-mbti/btn-bg.png',
          btnBg: this.imgBaseURL + '/scl/scl-before-result-page/job-mbti/btn-bg-1.png',
          questionImg: this.imgBaseURL + '/scl/scl-before-result-page/job-mbti/question-icon.png',
          tipBg: this.imgBaseURL + '/scl/scl-before-result-page/job-mbti/tip-bg.png',
          titImg: this.imgBaseURL + '/scl/scl-before-result-page/job-mbti/tit.png',
        },
        mbtiArr: [
          this.imgBaseURL + '/scl/question-page/mbti/ENFJ@2x.png',
          this.imgBaseURL + '/scl/question-page/mbti/ENFP@2x.png',
          this.imgBaseURL + '/scl/question-page/mbti/ENTJ.png@2x.png',
          this.imgBaseURL + '/scl/question-page/mbti/ENTP@2x.png',
          this.imgBaseURL + '/scl/question-page/mbti/ESFJ.png@2x.png',
          this.imgBaseURL + '/scl/question-page/mbti/ESFP@2x.png	',
          this.imgBaseURL + '/scl/question-page/mbti/ESTJ@2x.png',
          this.imgBaseURL + '/scl/question-page/mbti/ESTP@2x.png',
          this.imgBaseURL + '/scl/question-page/mbti/INFJ@2x.png',
          this.imgBaseURL + '/scl/question-page/mbti/INFP@2x.png',
          this.imgBaseURL + '/scl/question-page/mbti/INTJ@2x.png',
          this.imgBaseURL + '/scl/question-page/mbti/INTP@2x.png',
          this.imgBaseURL + '/scl/question-page/mbti/ISFJ@2x.png',
          this.imgBaseURL + '/scl/question-page/mbti/ISFP@2x.png',
          this.imgBaseURL + '/scl/question-page/mbti/ISTJ@2x.png',
          this.imgBaseURL + '/scl/question-page/mbti/ISTP@2x.png',
        ],
        actType: 'groupA',
        showPopup: false,
        loading: false,
        showFixedBtn: false,
        danmukuData: [],
        hasTriggeredSpecificCondition: false,
        hasBackLock: true,
        reRenderLegend: false,
        legendNum: 0,
        topH: 0,
      }
    },
    computed: {
      fixeBtnType() {
        ///1:默认样式，2：一元带icon，3:一元不带icon，4:其他优惠券
        if (this.sclInfo.discountType === 4) {
          return 3
        } else if (this.sclInfo && this.sclInfo.discountUid) {
          return 4
        } else {
          return 1
        }
      },
      nowPrice() {
        // return this.goodsGroup[this.actType === 'groupA'?0:1].preferentialPrice
        return this.sclInfo.discountPrice || this.sclInfo.newOriginalPrice
      },
      beforePrice() {
        // return this.goodsGroup[this.actType === 'groupA'?0:1].currentPrice
        return 0
      },
      legendImg() {
        return this.mbtiArr[this.legendNum]
      }
    },
    watch: {
      scrollTopNum(val) {
        this.showFixedBtn = val > this.windowHeight
      }
    },
    mounted() {
      const that = this
      uni.getSystemInfo({
        success(res) {
          that.windowHeight = res.windowHeight - 50
        }
      })
      this.topH = app.globalData.topHeight * 2

      countTimer = setInterval(() => {
        this.legendNum = this.legendNum + 1
        if (this.legendNum === this.mbtiArr.length) {
          this.legendNum = 0
        }
        this.reRenderLegend = true
        this.$nextTick(() => {
          this.reRenderLegend = false
        })
      }, 2 * 1000)

      // this.$refs.danmakuRef.createTimer()
    },
    beforeDestroy() {
      clearInterval(countTimer)
    },
    methods: {
      backHandle() {
        if (this.hasBackLock) {
          this.hasBackLock = false
          if (this.sclPayBack) {
            this.beforeExitPayModalVisible = true
          } else {
            this.modalVisible = true
          }
        } else {
          uni.setStorageSync('mbtiModalVisible', true)
          uni.reLaunch({
            url: '/pages/sclList/sclList'
          })
        }
      },
      backToSclList() {
        uni.setStorageSync('mbtiModalVisible', true)
        uni.reLaunch({
          url: '/pages/sclList/sclList'
        })
      },
      beforeExitPayClose() {
        console.log('===beforeExitPayClose====close')
        this.beforeExitPayModalVisible = false
        this.modalVisible = true
      },
      beforeExitPayConfirm() {
        console.log('===beforeExitPayConfirm====close')
        this.beforeExitPayModalVisible = false
        this.payHandle('Y')
        // uni.reLaunch({
        //   url: '/pages/sclList/sclList?userType=sclList'
        // })
      },
      beforeExitPayClose_2() {
        this.modalVisible = false
      },
      beforeExitPayConfirm_2() {
        this.modalVisible = false
        uni.setStorageSync('mbtiModalVisible', true)
        uni.reLaunch({
          url: '/pages/sclList/sclList?userType=sclList'
        })

      },
      payHandle: debounce(async function(isDisPay) {
        if (this.loading) return
        uni.showLoading({
          title: "请求支付中..."
        })

        console.log(isDisPay, '=============isDisPay')

        this.loading = true
        const that = this
        const submitForm = removeEmptyProperty({
          sclId: this.sclId,
          sclPayGroup: this.actType,
          orderType: '7',
          isAdditional: 'N',
          discountUid:this.$store.state.user.actCouponId,
          adClickId: uni.getStorageSync('adClickId'),
          isDisPay: (isDisPay == 'Y' || this.hasTriggeredSpecificCondition) ? 'Y' : 'N'
        })

        const {data:tmpRes} = await this.$u.api.getWxPayToken({
          sclId: this.sclId
        })
        submitForm.sclPayToken = tmpRes.data
        orderPay(submitForm).then(res => {

          if (res.data.code == 200) {
            uni.requestPayment({
              provider: 'wxpay',
              service: 5,
              orderInfo: res.data.data.wr,
              timeStamp: res.data.data.wr.timeStamp,
              nonceStr: res.data.data.wr.nonceStr,
              package: res.data.data.wr.packageValue,
              signType: res.data.data.wr.signType,
              paySign: res.data.data.wr.paySign,
              success: function(res) {
                that.$store.dispatch('user/getUserDiscountTakeEffect')
                that.$emit('payOk')
                setTimeout(()=>{
                  uni.hideLoading()
                  that.showPopup = false
                  that.loading = false
                },300)
              },
              fail: function(err) {
                that.$showToast('支付取消');
                uni.showLoading()
                that.showMoreSclBlock = true
                if (isDisPay != 'Y' && that.sclPayBack) {

                  that.beforeExitPayModalVisible = true
                  that.hasTriggeredSpecificCondition = true

                  setTimeout(() => {
                    that.hasTriggeredSpecificCondition = false
                  }, 60 * 1000)

                } else if (!that.sclPayBack) {
                  that.modalVisible = true
                }

                setTimeout(()=>{
                  uni.hideLoading()
                  that.showPopup = false
                  that.loading = false
                },300)
              }
            });
          } else {
            that.$showToast(res.data.message);
            setTimeout(()=>{
              uni.hideLoading()
              that.showPopup = false
              that.loading = false
            },300)
          }
        }).catch(e=>{
          setTimeout(()=>{
            this.showPopup = false
            this.loading = false
          },300)
        })

      }, 500),
      
      confirmHandle(){
        this.useSubscription(this.preConfirmHandle)
      },
      preConfirmHandle() {
        //     const that=this;

        //     const query = uni.createSelectorQuery().in(that);
        //     query.select('.first-small-btn').boundingClientRect(data => {

        //       if(that.scrollTopNum > data.top){
        //         that.showPopup = true
        //       }else{
        //         that.payHandle()
        //       }

        //     }).exec();

        const arr = this.$SUBSCRIBE_CODES
        const that = this

        uni.getSetting({ //getSetting获取用户的当前设置
          withSubscriptions: true,
          success: res => {
            console.log('res >>>>', res);
            if (res.subscriptionsSetting.mainSwitch &&
              res.subscriptionsSetting &&
              res.subscriptionsSetting[arr[0]] == 'accept' &&
              res.subscriptionsSetting[arr[1]] == 'accept' &&
              res.subscriptionsSetting[arr[2]] == 'accept') {
              that.payHandle()
            } else {
              uni.requestSubscribeMessage({
                tmplIds: arr,
                success(res) {
                  console.log('成功');
                  that.payHandle()
                },
                fail(res) {
                  console.log('失败');
                  that.payHandle()
                }
              })
            }
          }
        })

        // this.payHandle()
      },
      closeHandle() {
        this.showPopup = false
      },
    },
  }
</script>

<style lang="scss" scoped>
  .back-to-home-tip-box {
    margin-top: 26rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    font-family: PingFang-SC, PingFang-SC;
    font-weight: bold;
    font-size: 28rpx;
    color: #1920D0;
    line-height: 40rpx;
    letter-spacing: 1px;
    text-align: left;
    font-style: normal;

    .arrow-icon {
      width: 32rpx;
      height: 32rpx;

      .img-icon {
        width: 100%;
        height: 100%;
      }
    }
  }

  .scl-intro-box {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    line-height: 34rpx;

    font-style: normal;

    display: flex;
    justify-content: center;
    align-items: center;


    text-align: center;
    box-sizing: border-box;

    background: transparent;
    width: 100%;
    font-size: 28rpx;
    padding: 0 24rpx;
    text-align: justify;
    margin-top: 24rpx;
    color: #333;
  }

  .before-result-page-mbti {
    padding-bottom: 10vh;
    background-color: #fff;
    position: relative;

    .fixed-right-tip {
      width: 182rpx;
      height: 50rpx;
      column-gap: 14rpx;

      background: linear-gradient(180deg, #FDE591 0%, #FFCE66 100%);
      border-radius: 32rpx 0rpx 0rpx 32rpx;

      position: fixed;
      right: 0;
      top: 280rpx;
      z-index: 24;

      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding-left: 20rpx;

      font-family: PingFang-SC, PingFang-SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #7E3508;
      // line-height: 40rpx;
      text-align: center;
      font-style: normal;
    }


    .danmu-wrapper-pos {
      height: 450rpx;
      width: 750rpx;
      // background-color: red;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;

      z-index: 1;

      .danmu-wrapper {
        width: 100%;
        height: 100%;
        position: relative;
      }
    }

    .img-wrapper {
      position: relative;

      .img {
        width: 750rpx;
        // margin-bottom: 10px;
      }

      .box-wrapper-1-pos {
        position: absolute;
        // bottom: 0;
        top: 640rpx;
        left: 0;
        right: 0;

        // display: flex;
        // justify-content: center;



        // .col-2{
        //   width: 300rpx;
        //   height: 80rpx;
        //   display: flex;
        //   justify-content: center;
        //   align-items: center;
        //   margin: auto;

        //   margin-top: 40rpx;

        //   .img{
        //     width: 100%;
        //     height: 100%;
        //   }

        // }

      }

      // .box-wrapper-1-pos -- end


      .small-btn-wrapper {
        width: 400rpx;
        height: 100rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;

        margin-top: 40rpx;

        .img {
          width: 100%;
          height: 100%;
        }
      }

      .before-exit-btn-wrapper {
        width: 400rpx;
        height: 100rpx;
        // background: linear-gradient( 180deg, #A7AAFF 0%, #6783FF 100%);
        // border-radius: 40rpx;

        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;
        position: relative;

        background-size: 100%;
        background-repeat: no-repeat;

        .price-box {
          display: flex;
          align-items: flex-end;

          .unit {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 26rpx;
            color: #FFFFFF;
            line-height: 37rpx;

            font-style: normal;
            margin-bottom: 4rpx;
            margin-right: 4rpx;
          }

          .num {
            font-family: HelveticaNeue, HelveticaNeue;
            font-weight: 500;
            font-size: 50rpx;
            color: #FFFFFF;
            line-height: 61rpx;

            font-style: normal;
          }
        }

        .abs-tip-box {
          position: absolute;
          bottom: 62rpx;
          left: 50%;
          transform: translateX(-50%);

          background-repeat: no-repeat;
          background-size: 100%;


          // display: flex;
          // justify-content: center;
          // align-items: center;
          width: 200rpx;
          height: 50rpx;
          box-sizing: border-box;
          text-align: center;
          padding-top: 6rpx;

          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 22rpx;
          color: #FF4A4A;
          // line-height: 30rpx;
          // text-align: left;
          font-style: normal;

          // text-align: center;

        }

        .btn-text {
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          font-size: 30rpx;
          color: #FFFFFF;
          line-height: 42rpx;
          text-align: center;
          font-style: normal;
          margin-left: 12rpx;
        }

        margin-top: 40rpx;
      }

      .box-wrapper-3-pos {
        position: absolute;
        top: 774rpx;
        right: 154rpx;
        left: 296rpx;
      }

      .box-wrapper-4-pos {
        position: absolute;
        bottom: 114rpx;
        left: 0;
        right: 0;
      }

      .box-wrapper-5-pos {
        position: absolute;
        bottom: 766rpx;
        left: 0;
        right: 0;
      }

      .box-wrapper-6-pos {
        position: absolute;
        bottom: 654rpx;
        left: 0;
        right: 0;
      }

      .box-wrapper-8-pos {
        position: absolute;
        bottom: 248rpx;
        left: 0;
        right: 0;
      }

      .box-wrapper-10-pos {
        position: absolute;
        bottom: 332rpx;
        left: 0;
        right: 0;
      }

      .box-wrapper-12-pos {
        position: absolute;
        bottom: 200rpx;
        left: 0;
        right: 0;
      }

      .box-wrapper-14-pos {
        position: absolute;
        bottom: 220rpx;
        left: 0;
        right: 0;
      }
    }

    // .img-wrapper -- end


    .info-box-list {
      display: flex;
      align-items: center;
      justify-content: center;
      column-gap: 24rpx;


      .info-box {
        width: 336rpx;
        height: 266rpx;
        border-radius: 14rpx;
        border: 1rpx solid #D1D0D0;
        box-sizing: border-box;

        position: relative;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .more-intro-abs {
          position: absolute;

          top: -32rpx;
          left: -12rpx;

          width: 232rpx;
          height: 50rpx;
          background: linear-gradient(180deg, #FAB158 0%, #FF5862 100%);
          border-radius: 0rpx 14rpx 0rpx 14rpx;

          line-height: 50rpx;
          text-align: center;

          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #FFFFFF;
          font-style: normal;
        }

        .name {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 34rpx;
          color: #333333;
          line-height: 48rpx;
          text-align: left;
          font-style: normal;
        }

        .price-row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 6rpx;
          margin-bottom: 6rpx;

          column-gap: 12rpx;

          .current-price {
            display: flex;
            align-items: center;
            column-gap: 4rpx;

            .unit {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 26rpx;
              color: #FF4A4A;
              line-height: 37rpx;
              text-align: left;
              font-style: normal;
            }

            .num {
              font-family: HelveticaNeue, HelveticaNeue;
              font-weight: 500;
              font-size: 60rpx;
              color: #FF4A4A;
              line-height: 74rpx;
              text-align: left;
              font-style: normal;

            }
          }

          .market-price {
            display: flex;
            align-items: center;
            column-gap: 4rpx;
            position: relative;


            ::before {
              content: '';
              position: absolute;
              top: 50%;
              left: 50%;
              width: 68rpx;
              height: 1rpx;
              background: #888;
              transform: translate(-50%);
            }




            .unit {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 23rpx;
              color: #666666;
              line-height: 32rpx;
              text-align: left;
              font-style: normal;
            }

            .num {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 23rpx;
              color: #666666;
              line-height: 32rpx;
              text-align: left;
              font-style: normal;
            }
          }
        }



        .intro-row {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 21rpx;
          color: #666666;
          line-height: 29rpx;

          font-style: normal;

          width: 300rpx;
          height: 80rpx;
          background: #F4F5F8;
          border-radius: 8rpx;
          display: flex;
          justify-content: center;
          align-items: center;


          text-align: center;
          box-sizing: border-box;
          padding: 0 12rpx;


        }

      }


      .info-box-act {
        border: 3rpx solid #728AFF;
      }

    }

    // .info-box-list -- end



    .btn-wrapper-pos {
      position: fixed;
      bottom: 7vh;

      left: 0;
      right: 0;

      display: flex;
      justify-content: center;

      .before-exit-btn-wrapper {
        width: 400rpx;
        height: 100rpx;

        // background: linear-gradient( 180deg, #A7AAFF 0%, #6783FF 100%);
        // border-radius: 40rpx;

        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;

        background-repeat: no-repeat;
        background-size: 100%;

        .price-box {
          display: flex;
          align-items: flex-end;

          .unit {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 26rpx;
            color: #FFFFFF;
            line-height: 37rpx;

            font-style: normal;
            margin-bottom: 4rpx;
            margin-right: 4rpx;
          }

          .num {
            font-family: HelveticaNeue, HelveticaNeue;
            font-weight: 500;
            font-size: 50rpx;
            color: #FFFFFF;
            line-height: 61rpx;

            font-style: normal;
          }
        }

        .btn-text {
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          font-size: 30rpx;
          color: #FFFFFF;
          line-height: 42rpx;
          text-align: center;
          font-style: normal;
          margin-left: 12rpx;
        }

        // margin-top: 40rpx;

      }


      .btn-wrapper {
        width: 600rpx;
        height: 90rpx;

        .btn-img {
          width: 100%;
          height: 100%;
        }
      }
    }


    .popup-wrapper {
      width: 750rpx;
      min-height: 502rpx;
      background: #FFFFFF;
      border-radius: 40rpx 40rpx 0rpx 0rpx;
      box-sizing: border-box;
      padding-top: 66rpx;
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);

      .pay-btn {
        width: 600rpx;
        height: 90rpx;
        background: linear-gradient(180deg, #A7AAFF 0%, #6783FF 100%);
        border-radius: 45rpx;

        display: flex;
        align-items: center;
        justify-content: center;
        margin: auto;
        margin-top: 40rpx;

        .text {
          font-family: PingFang-SC, PingFang-SC;

          font-size: 30rpx;
          color: #FFFFFF;
          line-height: 42rpx;
          text-align: left;
          font-style: normal;
          margin-left: 10rpx;
        }
      }


    }
  }

  @keyframes showDivAni {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  .box-wrapper-1-pos {
    display: flex;
    flex-direction: column;
    // justify-content: center;
    align-items: center;

    .first-small-btn {
      width: 660rpx;
      height: 189rpx;
      box-sizing: border-box;
      position: relative;

      background-repeat: no-repeat;
      background-size: 100%;

      display: flex;
      // align-items: center;
      justify-content: center;

      padding-top: 68rpx;

      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      font-size: 32rpx;
      color: #FFFFFF;
      // line-height: 45rpx;

      text-align: left;
      font-style: normal;

      .unit {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        margin-top: 9rpx;

      }

      .price {
        font-size: 40rpx;
        margin-right: 10rpx;
        margin-top: -4rpx;


      }


      .tip-box {
        position: absolute;
        right: 30rpx;
        top: 12rpx;
      }
    }

    .tit-img-wrapper {
      margin-top: 34rpx;
      width: 580rpx;
      height: 64rpx;

      .img {
        width: 100%;
        height: 100%;
      }
    }

    .text-box {
      position: relative;
      font-family: PingFang-SC, PingFang-SC;
      font-weight: 500;
      font-size: 32rpx;
      color: #FFFFFF;
      line-height: 45rpx;
      letter-spacing: 1px;
      text-align: left;
      font-style: normal;

      &::after,
      &::before {
        position: absolute;
        content: ' ';

        border-top: 1px solid #FFFFFF;
        top: 50%;
        transform: translateY(-50%);
        width: 40rpx;
      }

      &::after {
        left: -60rpx;
      }

      &::before {
        right: -60rpx;
      }
    }
  }

  .legend-wrapper {
    margin-top: 22rpx;
    width: 480rpx;
    height: 446rpx;
    position: relative;

    .legend-img {
      animation: showDivAni .8s 1;
      width: 100%;
      height: 100%;
    }

    .question-img {
      width: 220rpx;
      height: 88rpx;
      position: absolute;
      left: 130rpx;
      bottom: 50rpx;

      .img {
        width: 100%;
        height: 100%;
      }
    }
  }


  .tip-box {
    border-radius: 23rpx 23rpx 23rpx 0rpx;
    background: linear-gradient(180deg, #F89DFF 0%, #F155EB 100%);

    padding: 4rpx 22rpx;
    height: 46rpx;

    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #FFFFDA;
    line-height: 40rpx;
    text-align: center;
    font-style: normal;
  }
</style>